[UI Framework] Add isReadOnly prop to KuiCodeEditor. #14804
Conversation
|
Thanks for moving this into the ui framework. One thing I could not figure out - is there any way to avoid showing the cursor until the user interacts with the editor? Even in readonly mode, the cursor is placed at the end. It would be nice if there was no cursor until the user clicked in the text for copy selection. |
|
@nreese You can use the following CSS to hide the inactive cursor: .ace_hidden-cursors { opacity:0 } I am not sure if we want to do this in general for the read only mode? Maybe we could create another flag that sets a CSS class on the wrapper, and only apply this when this flag is set? But I would also be fine always hiding read only inactive cursors, if you think it's better. |
|
I think it makes sense to hide the inactive cursor since the editor is readonly. I find the cursor distracting. It invites you to start typing - which is not allowed |
|
We need to keep the cursor visible, at least while the user is interacting with the editor. This will allow people who are interacting via keyboard to select text. I looked through the docs, but couldn't find a way to hide the cursor. The best I could do was place the cursor at the beginning of a read-only code editor. This is a little less obtrusive, and probably more usable since you're more likely to want to select the code from the beginning than the end. Can you take another look @nreese ? |
|
Oh wait, I can use Tim's CSS to hide the cursor until the editor has received focus. One sec... |
| if (isReadOnly) { | ||
| // Put the cursor at the beginning of the editor, so that it doesn't look like | ||
| // a prompt to begin typing. | ||
| filteredCursorStart = -1; |
There was a problem hiding this comment.
Is this logic still needed now that css is used to hide the cursor?
There was a problem hiding this comment.
I think it still makes sense to put the cursor at the beginning for people who are using the keyboard to interact with the content. I'm guessing they'd want to copy/paste it and it makes sense to me intuitively to do that from start to end rather than the reverse.
|
jenkins, test this |
|
@cjcenizal Thanks for hiding the cursor in readonly mode. This looks great. lgtm once CI passes |
* Add isReadOnly prop to KuiCodeEditor. * Place cursor at beginning of code editor if it's read-only. * Surface prompt for isReadOnly mode. Only show cursor when the editor is focused.
* Add isReadOnly prop to KuiCodeEditor. * Place cursor at beginning of code editor if it's read-only. * Surface prompt for isReadOnly mode. Only show cursor when the editor is focused.
* Add isReadOnly prop to KuiCodeEditor. * Place cursor at beginning of code editor if it's read-only. * Surface prompt for isReadOnly mode. Only show cursor when the editor is focused.
No description provided.